<template>
  <div class="mainContainer">
    <div class="mainContainer_left">
      <el-scrollbar>
        <div class="navigation">
          <div
            v-for="i in navigations"
            :key="i"
            class="navigation_item"
            :class="{navigation_active: '/' + i === activeItem}"
            @click="routerTo(i)"
          >{{i}}</div>
        </div>
      </el-scrollbar>
    </div>
    <div class="mainContainer_right">
<!--      <RouterView />-->
      <router-view v-slot="{ Component, route }">
        <keep-alive :include="keepList">
          <component
            :is="Component"
            v-if="!route.meta.link"
            :key="route.path"
          />
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>
<script setup>
// import {useRoute} from "vue-router";
// const route = useRoute()
// console.log(window.location);
// sessionStorage.setItem('jsSdk_url',window.location.href.split('#')[0])
// window.addEventListener('beforeunload', () => {
//   // 执行需要监听的代码
//   console.log(window.location);
// });

import { computed, ref } from "vue";

import useKeepStore from "@/stores/keepalive";
const keepStore = useKeepStore();
const keepList = computed(() => {
  console.log(keepStore.keepList);
  return keepStore.keepList;
});


const pages = import.meta.glob('./views/*.vue')
// console.log(pages);
const paths = []
for (const path in pages) {
  paths.push(path)
}
const navigations = paths.map(d => {
  return d.split('/')[2].split('.')[0]
})
import {useRoute,useRouter} from "vue-router";
const route = useRoute()
const router = useRouter()
const activeItem = computed(() => {
  return route.path
})
const routerTo = (url) => {
  router.push({path:url})
}
</script>
<style scoped lang="scss">
.mainContainer{
  width: 100vw;
  height:100vh;
  display: flex;
  overflow-x: hidden;
  &_left{
    flex: 0 0 200px;
    width: 200px;
    height:100vh;
    border-right: 1px solid #ccc;
    .navigation{
      padding-left: 8px;
      &_item{
        cursor: pointer;
        user-select: none;
        height:40px;
        line-height: 40px;
      }
      &_active{
        color:red;
      }
    }
  }
  &_right{
    width: calc(100vw - 200px);
    flex:1;
    height:100vh;
  }
}
</style>
